<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商家详情</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/shop.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/zepto.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        window.onload = function () {
            const {createApp, ref,computed} = Vue
            createApp({
                setup() {
                    const shopCarList = ref([])
                    const productsList = ref([])

                    // 2. 获取数据后初始化count（确保每个商品有数量属性）
                    let getData = () => {
                        fetch(`http://localhost:3000/products`)
                            .then(response => response.json())
                            .then(data => {
                                productsList.value = data
                            })
                            .catch(err => console.error('获取数据失败:', err));
                        fetch(`http://localhost:3000/shopCar`)
                            .then(response => response.json())
                            .then(data => {
                                shopCarList.value = data
                            })
                            .catch(err => console.error('获取数据失败:', err));
                    }
                    getData()

                    let newData = (id,newCount,kindsID) =>{
                        let product = productsList.value.filter(item => item.id ===kindsID)[0]
                        product.goods[id-1].count=newCount
                        fetch(`http://localhost:3000/products/${kindsID}`,{
                            method:"PUT",
                            headers:{
                                'Content-Type': 'application/json'
                            },
                            body:JSON.stringify(product)
                        })
                    }

                    // let pushData = (goods) =>{
                    //     let newgoods = {}
                    //     const date = new Date();
                    //     const year = date.getFullYear(); // 年份（4位）
                    //     const month = String(date.getMonth() + 1).padStart(2, '0');
                    //     const day = String(date.getDate()).padStart(2, '0');
                    //     const hour = String(date.getHours()).padStart(2, '0');
                    //     const minute = String(date.getMinutes()).padStart(2, '0');
                    //     newgoods.shop="永辉超市"
                    //     newgoods.orderStatus="已取消"
                    //     newgoods.id= `${year}${month}${day}${hour}${minute}`;
                    //     newgoods.shopCarGoods = [goods]
                    //
                    //     //生成自增id
                    //     const maxId = shopCarList.value.length > 0
                    //         ? Math.max(...shopCarList.value.map(item => item.id))
                    //         : 0;
                    //
                    //     shopCarList.value.push(newgoods)
                    //     fetch(`http://localhost:3000/shopCar`,{
                    //         method:"PUT",
                    //         headers:{
                    //             'Content-Type': 'application/json'
                    //         },
                    //         body:JSON.stringify(shopCarList.value)
                    //     })
                    // }

                    let reduce = (index,kindsID) =>{
                        let product = productsList.value.filter(item => item.id ===kindsID)[0]
                        if (product.goods[index-1].count>0) {
                            product.goods[index-1].count--;
                            newData(index,product.goods[index-1].count,kindsID)
                        }
                    }

                    let add =(index,kindsID) =>{
                        let product = productsList.value.filter(item => item.id ===kindsID)[0]
                        product.goods[index-1].count++;
                        newData(index,product.goods[index-1].count,kindsID)
                        // pushData(product.goods[index-1])
                    }

                    return {productsList,add,reduce}
                }
            }).mount('#app')
            createApp({
                setup(){
                    const shopCarList = ref([])
                    const orderCar = ref([])

                    let getShopCar = () => {
                        fetch(`http://localhost:3000/shopCar`)
                            .then(response => response.json())
                            .then(data => {
                                shopCarList.value = data[0]
                                orderCar.value = data
                            })
                            .catch(err => console.error('获取数据失败:', err));
                    }
                    getShopCar()

                    const sumPrice =  computed(() =>{
                        let sum = 0;
                        for (let i = 1; i < shopCarList.value.shopCarGoods.length+1; i++) {
                            sum = Number.parseFloat((shopCarList.value.shopCarGoods[i-1].count * shopCarList.value.shopCarGoods[i-1].price).toFixed(2)) + sum;
                        }
                        return sum;
                    })

                    let goToOrderConfirm = () =>{
                        window.location.href="order-confirm.html"
                    }

                    let goToShopCar = () =>{
                        window.location.href="shopcart.html"
                    }

                    return {goToOrderConfirm,goToShopCar,sumPrice}
                }
            }).mount('#app1')
        }

    </script>
</head>

<body>
    <div class="wrap" id="app">
        <!-- 头部 start -->
        <header class="header_bar">
            <a href="../index.html">
                <div class="header_bar_back"></div>
            </a>
            <div class="header_bar_title">商家主页</div>
        </header>
        <!-- 头部 end -->
        <!-- 商家主页-头部 start -->
        <div class="shop_info">
            <div class="logo">
                <img src="../images/shop/yh.jpg" alt="">
            </div>
            <div class="title">
                <h2>
                    <span>永辉超市-搜秀城店</span>
                    <i class="iconfont icon-yousanjiao"></i>
                </h2>
                <div class="discount">
                    <div>
                        <span class="special">满减</span>
                        <span class="dis_active">满99减98，满199减198</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商家主页-头部 end -->
        <div class="container">
            <!-- 商品列表 start -->
            <div class="goods">
                <div class="left">
                    <ul>
                        <li class="cur">
                            <span><a href="#A">限量秒杀</a></span>
                        </li>
                        <li>
                            <span><a href="#B">品牌直降</a></span>
                        </li>
                        <li>
                            <span><a href="#C">情满中秋</a></span>
                        </li>
                    </ul>
                </div>
                <div class="right" onscroll="toscroll()">
                    <ul>
                        <li v-for="kinds in productsList" :id="kinds.id">
                            <h1 class="goodTitle">{{kinds.kind}}</h1>
                            <dl>
                                <dd class="good_item" v-for="(item,index) in kinds.goods" :key="item.id">
                                    <img :src="item.imgUrl" alt="">
                                    <section class="info">
                                        <p class="name">{{item.name}}</p>
                                        <p class="desc">{{item.desc}}</p>
                                        <p class="sale">
                                            <span>月售{{item.sales}}</span>
                                            <span>好评率{{item.rate}}</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> {{item.price}}
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" @click="reduce(item.id,kinds.id)"></span>
                                                <span class="num" id="num1">{{item.count}}</span>
                                                <span class="iconfont icon-jia" @click="add(item.id,kinds.id)"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 商品列表 end -->
        </div>
    </div>
    <!--去结算 start-->
    <div class="cart" id="app1">
        <div class="cart_info">
            <div class="carlogo" @click="goToShopCar">
                <span class="iconfont icon-gouwuche">   <i class="count">{{sumCount}}</i></span>

            </div>
            <div class="price">
                <div class="noShop">
                    <p style="color: #fff;font-size: 0.3rem;">总计：{{sumPrice}} 元</p>
                </div>
            </div>
            <div class="account" @click="goToOrderConfirm">去结算</div>
        </div>
        <!--去结算 end-->
    </div>
</body>
<script>
    //右侧滑动
    function toscroll() {
        var titles = $('.goodTitle');
        for (var i = 0; i < titles.length; i++) {
            var style = titles[i].getBoundingClientRect();
            if (style.top == 182) {
                $($(".left ul li")[i]).addClass('cur').siblings().removeClass('cur');
            }
        }
    }
</script>

</html>